<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>股票分时图</title>
    <style>
        /* css 代码  */
    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
</head>

<body>
<div id="main" style="min-width:400px;height:400px"></div>
<script>
    var _current = new Date();
    var base = +new Date(_current.getFullYear(), _current.getMonth(), _current.getDate(), 9, 29, 0);
    var oneMinute = 60 * 1000 * 1;
    var date = [];
    var openValue = Math.round(Math.random() * 300);
    var data = [openValue];
    var _index = 100;//当前开始数据为空的下标

    for (var i = 1; i < 392; i++) {
        var now = new Date(base += oneMinute);
        date.push([now.getHours() < 10 ? ('0' + now.getHours()) : now.getHours(), now.getMinutes() < 10 ? ('0' + now.getMinutes()) : now.getMinutes(), now.getSeconds() < 10 ? ('0' + now.getSeconds()) : now.getSeconds()].join(':'));
        var _value = Math.round((Math.random() - 0.5) * 20 + data[i - 1]);
        if(i>=_index){
            _value = null;
        }
        if (_value < 0) {
            _value = 0;
        }
        data.push(_value);
    }
    console.log(data);

    option = {
        tooltip: {
            trigger: 'axis',
            triggerOn:'mousemove',
            confine:true,
            position: function(pt) {
                return [pt[0], '10%'];
            },
            formatter: function(a,b,c) { //value当前值，index当前索引
                if(a[1].data){
                    a[1].data = ((a[1].data-openValue)/openValue).toFixed(2);
                    return a[0].axisValue+'<br/>模拟数据：'+a[0].data+'<br/>涨跌幅：'+a[1].data+'%';
                }else{
                    // return '暂无';
                }
            }
        },
        title: {
            left: 'center',
            text: '股票分时图',
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: [{
            show: true,
            type: 'category',
            boundaryGap: false,
            data: date,
            position: 'bottom',
            axisLabel: {
                interval: 29,
                textStyle: {
                    color: '#333'
                }
            },
            axisLine: {
                show:true,
                lineStyle: {
                    type: 'solid',
                    color: '#ccc',
                    width: 1
                }
            },
            // 控制网格线是否显示
            splitLine: {
                show: true,
                //  改变轴线颜色
                lineStyle: {
                    // 使用深浅的间隔色
                    color: '#ccc'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {// 坐标轴线
                lineStyle: {
                    type: 'solid',
                    color: '#ededed',
                    width: 1
                }
            },
            axisLabel: {// 坐标轴文本标签，详见axis.axisLabel
                textStyle: {
                    color: '#000'
                }
            },
            splitArea:{// 分隔区域
                show:true, // 默认不显示，属性show控制显示与否
                areaStyle:{// 属性areaStyle（详见areaStyle）控制区域样式
                    color:['#fbfbfb','#fbfbfb'],//设置格子背景颜色，第一个设置奇数格子，第二个设置偶数格子
                    opacity:1
                }
            }
        }, {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#ccc',
                    width: 1
                }
            },
            axisLabel: {
                interval: 5,
                textStyle: {
                    color: '#000'
                },
                formatter: function(value, index) { //value当前值，index当前索引
                    return ((value-openValue)/openValue).toFixed(2)+'%';
                }
            }
        }],
        series: [{
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            yAxisIndex: 0,
            itemStyle: {
                color: '#cf6a32',
                width:1
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#eac3ae'
                }, {
                    offset: 1,
                    color: '#f8f1ed'
                }])
            },
            data: data,
            //标识线（收盘价）
            markLine: {
                symbol:'none',//去掉警戒线最后面的箭头
                itemStyle: {
                    normal: {
                        lineStyle: {
                            type: 'solid',
                            color: '#cf6a32',
                            width:1
                        },
                        label: {
                            show: true,
                            position: 'middle'//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                        }
                    }
                },
                data: [{
                    name: 'Y 轴值为 '+openValue+' 的水平线',
                    yAxis: openValue
                }]
            }
        }, {
            name: '涨跌幅',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            yAxisIndex: 1,
            itemStyle: {
                color: '#cf6a32',
                width:1
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#eac3ae'
                }, {
                    offset: 1,
                    color: '#f8f1ed'
                }])
            },
            data: data
        }]
    };

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //每隔1秒获取最新数据
    var _timer = window.setInterval(function(){
        var now = new Date(base += oneMinute);
        var _value = Math.round((Math.random() - 0.5) * 20 + data[_index - 1]);
        if (_value < 0) {
            _value = 0;
        }
        data[_index] = _value;
        _index++;
        if(_index>=392){
            window.clearInterval(_timer);
        }
        myChart.setOption(option);
    },1000)
</script>
</body>

</html>
